<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Markdown编辑器</title>
    <!-- EasyMDE 样式 -->
    <!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.css"> -->
    <link rel="stylesheet" href="./easymde.min.css">

    <style>
        /* js, vue2, vue3, react, 浏览器, ts */
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f6f8fa;
            color: #24292e;
        }
        .container {
            max-width: 1000px;
            margin: 0 auto;
            background: white;
            border-radius: 8px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
            overflow: hidden;
        }
        .header {
            background: #2c3e50;
            color: white;
            padding: 20px;
            text-align: center;
        }
        .editor-container {
            padding: 20px;
        }
        .preview-container {
            padding: 20px;
            border-top: 1px solid #e1e4e8;
        }
        h1 {
            margin: 0;
            font-size: 24px;
        }
        .instructions {
            background: #f1f8ff;
            border-left: 4px solid #0366d6;
            padding: 10px 15px;
            margin: 20px 0;
            border-radius: 0 4px 4px 0;
            font-size: 14px;
        }
        .mode-toggle {
            text-align: center;
            margin: 10px 0;
        }
        .mode-toggle button {
            background: #f1f8ff;
            border: 1px solid #0366d6;
            padding: 8px 16px;
            cursor: pointer;
            border-radius: 4px;
            color: #0366d6;
            font-weight: 500;
        }
        .mode-toggle button.active {
            background: #0366d6;
            color: white;
        }
        .hidden {
            display: none;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>Markdown编辑器</h1>
        </div>
        
        <div class="instructions">
            <p><strong>使用提示：</strong> 这是一个Markdown编辑器，您可以使用Markdown语法编写内容。支持**加粗**、*斜体*、列表、代码块等功能。</p>
        </div>
        
        <div class="mode-toggle">
            <button id="edit-btn" class="active">编辑模式</button>
            <button id="preview-btn">预览模式</button>
        </div>
        
        <div class="editor-container" id="editor-area">
            <textarea id="markdown-editor"></textarea>
        </div>
        
        <div class="preview-container hidden" id="preview-area">
            <div id="markdown-preview"></div>
        </div>
    </div>

    <!-- 引入EasyMDE -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.js"></script> -->
    <script src="./easymde.min.js"></script>

    <!-- 引入Marked.js用于解析Markdown -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script> -->
    <script src="./marked.min.js"></script>

    <script>
        // 初始化EasyMDE编辑器
        const easyMDE = new EasyMDE({
            element: document.getElementById('markdown-editor'),
            spellChecker: false,
            autosave: {
                enabled: true,
                uniqueId: "my-markdown-editor",
                delay: 1000,
            },
            placeholder: "开始编写您的Markdown内容...",
            status: ["lines", "words", "cursor"],
            tabSize: 4,
            indentWithTabs: false,
            shortcuts: {
                "toggleOrderedList": "Ctrl-Alt-L",
                "toggleUnorderedList": "Ctrl-L",
            }
        });
        
        // 添加示例内容
        easyMDE.value("# 欢迎使用Markdown编辑器\n\n这是一个**示例文档**。\n\n## 功能特性\n\n- 实时编辑\n- 语法高亮\n- 自动保存\n\n## 代码示例\n\n```javascript\nfunction helloWorld() {\n    console.log('Hello, World!');\n}\n```");
        
        // 获取DOM元素
        const editBtn = document.getElementById('edit-btn');
        const previewBtn = document.getElementById('preview-btn');
        const editorArea = document.getElementById('editor-area');
        const previewArea = document.getElementById('preview-area');
        const previewDiv = document.getElementById('markdown-preview');
        
        // 切换编辑/预览模式
        editBtn.addEventListener('click', function() {
            editorArea.classList.remove('hidden');
            previewArea.classList.add('hidden');
            editBtn.classList.add('active');
            previewBtn.classList.remove('active');
        });
        
        previewBtn.addEventListener('click', function() {
            console.error(easyMDE.value());
            // 将Markdown转换为HTML
            previewDiv.innerHTML = marked.parse(easyMDE.value());
            editorArea.classList.add('hidden');
            previewArea.classList.remove('hidden');
            editBtn.classList.remove('active');
            previewBtn.classList.add('active');
        });
    </script>
</body>
</html>